<template>
  <view class="content flexc justify-center">
    <view class="card flexc align-center">
      <image class="user" :src="userIcon" mode="aspectFill"></image>
      <text class="name text-color1">{{ userStore.userInfo.customerName }}</text>
      <w-barcode class="barcode" :options="baroptions"></w-barcode>
      <view class="barcode-text text-color5" @click="hideAccountCode = false">
        {{ formatAccountCode }} 查看数字
      </view>
      <w-qrcode class="qrcode" :options="qroptions"></w-qrcode>
      <view class="qrcode-desc text-color5 flexr align-center">
        <image class="refresh" src="@/static/refresh.png"></image>
        会员码每30秒自动更新，请在店内消费时使用
      </view>
      <view class="flex-1"></view>
      <view class="datas flex-1 flexr align-center justify-spacebwt">
        <view class="flexc align-center flex-1">
          <view class="number">{{ userStore.userInfo.amount }}</view>
          <view class="label">余额</view>
        </view>
        <view class="flexc align-center flex-1">
          <view class="number">{{ userStore.userInfo.integral }}</view>
          <view class="label">积分</view>
        </view>
        <view class="flexc align-center flex-1">
          <view class="number">{{ userStore.userInfo.couponCount }}</view>
          <view class="label">优惠券</view>
        </view>
        <view class="flexc align-center flex-1">
          <view class="number">{{ userStore.userInfo.countCardCount }}</view>
          <view class="label">消费次卡</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, watch, computed } from "vue";
import { onLaunch, onShow, onHide, onLoad } from "@dcloudio/uni-app";
import { useUserStore } from "@/store/user";
import { BuildImageUrl } from "@/api/api";
import applogo from "@/static/applogo.png";
const userStore = useUserStore();
const userIcon = computed(() => {
	// userStore.userInfo.headPortrait || applogo
	if (userStore.userInfo.headPortrait) {
		return BuildImageUrl(userStore.userInfo.headPortrait);
	}
	return applogo;
});
const baroptions = ref({
  width: 650,
  height: 112,
  code: '',
});
const qroptions = ref({
  code: '',
  size: 390,
});
onLoad(() => {
  console.log('onLoad==>', userStore.accountCode);
  baroptions.value.code = userStore.accountCode;
  qroptions.value.code = userStore.accountCode;
  userStore.getCustomerAccountCode();
});
const hideAccountCode = ref(true);
const formatAccountCode = computed(() => {
	if (hideAccountCode.value) {
		// console.log(userStore.accountCode);
		if (userStore.accountCode && userStore.accountCode.length > 5) {
			return userStore.accountCode.substr(0, 5) + " **** **** ****";
		} else {
			return "**** **** ****";
		}
	}
	return userStore.accountCode;
});
watch(() => userStore.accountCode, (val) => {
  console.log('==>',val);
	baroptions.value.code = val;
	qroptions.value.code = val;
});
</script>

<style lang="scss">
.content {
  background-color: #156557;
  .card {
    background-color: white;
    height: 1050rpx;
    min-height: 1050rpx;
    margin: 32rpx;
    border-radius: 32rpx;
    .user {
      box-sizing: border-box;
      width: 150rpx;
      height: 150rpx;
      border: 4rpx solid white;
      border-radius: 75rpx;
      margin-top: -75rpx;
    }
    .name {
      margin-top: 10rpx;
    }
    .barcode {
      margin-top: 43rpx;
    }
    .barcode-text {
      font-size: 22rpx;
      margin-top: 20rpx;
    }
    .qrcode {
      margin-top: 60rpx;
    }
    .qrcode-desc {
      font-size: 22rpx;
      margin-top: 20rpx;
      .refresh {
        width: 40rpx;
        height: 45rpx;
        padding: 10rpx;
        box-sizing: border-box;
        margin-right: 10rpx;
      }
    }
    .datas {
      height: 187rpx;
      min-height: 187rpx;
      align-self: stretch;
      // background-color: red;
      border-top: 2rpx dashed $divider-color;
      padding: 0 48rpx;
      .number {
        font-size: 48rpx;
        color: #36bba5;
      }
      .label {
        margin-top: 15rpx;
        color: $text-color2;
        font-size: 28rpx;
      }
    }
  }
}
</style>
